<script setup>
import { ref, onMounted } from 'vue'
import Button from '../Button/Button.vue'
const props = defineProps({
  // 描述
  content: {
    type: String,
    required: true
  },
  // 标题
  title: {
    type: String
  },
  // 取消按钮文本
  cancelText: {
    type: String,
    default: '取消'
  },
  // 确定按钮文本
  confirmText: {
    type: String,
    default: '确定'
  },
  // 取消按钮事件
  cancelHandler: {
    type: Function
  },
  // 确定按钮事件
  confirmHandler: {
    type: Function
  },
  // 关闭 confirm 的回调
  close: {
    type: Function
  }
})
const isVisable = ref(false)
const show = () => {
  isVisable.value = true
}

onMounted(() => {
  show()
})
</script>
<template>
  <transition name="fade">
    <div
      v-if="isVisable"
      class="container fixed top-0 left-0 bottom-0 right-0 h-screen w-screen bg-zinc-900/80 z-20"
    ></div>
  </transition>
  <transition name="up">
    <div
      v-if="isVisable"
      class="content fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white w-96 h-48 z-30"
    >
      <div class="title">
        {{ title }}
      </div>
      <div class="content">
        {{ content }}

      </div>
      <div class="but absolute bottom-4 right-4">
        <Button @click="confirmHandler" class="mr-2">{{ confirmText }}</Button>
        <Button @click="cancelHandler">{{ cancelText }}</Button>
      </div>
    </div>
  </transition>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.up-enter-active,
.up-leave-active {
  transition: all 0.5s;
}

.up-enter-from,
.up-leave-to {
  opacity: 0;
  transform: translate3d(-50%, 100px, 0);
}
</style>
